<template>
    <div class="home-wrap">
        <ul class="left">
            <li v-for="(item,i) in navList" :key="i" @click="change(item.id)">
                 {{item.title}}   
            </li>
        </ul>
        <div class="right">
            <dl-item v-for="(item,i) in icreamList" :key="i" :obj="item" @open="open"></dl-item>
        </div>
        <el-dialog v-show="isShow" 
            :num="chooseObj.num"
            :price="chooseObj.price"
            :title="chooseObj.title"
            :id="chooseObj.id"
            @add="add"
            @reduce="reduce"
         @close="isShow = false"></el-dialog>
    </div>
</template>
<script>
import dlItem from '../components/dlItem'
import elDialog from '../components/elDialog'
export default {
    components:{
        dlItem,
        elDialog
    },
    created(){
        this.getData();
    },
    data(){
        return {
            navList:[],
            icreamList:[],
            isShow:false,
            chooseObj:{}
        }
    },
    methods:{
        getData(){
            this.$http.get('/api/navIcream').then(res => {
                // console.log(res);
                if(res.data.code === 1){
                    this.navList = res.data.data;
                    console.log(this.navList)
                    return this.$http.get('/api/icream',{params:{type:this.navList[0].id}})
                }
            }).then(res => {
                if(res.data.code === 1){
                    this.icreamList = res.data.data;
                    console.log(this.icreamList);
                }
            })
        },
        change(id){
            this.$http.get('/api/icream',{params:{type:id}}).then(res => {
                if(res.data.code === 1){
                    this.icreamList = res.data.data;
                    console.log(this.icreamList);
                }
            })
        },
        open(id){
            this.isShow = !this.isShow;
            let obj = this.icreamList.find(item => {
                return item.id === id
            });
            obj.num = 1;
                
            this.chooseObj = obj;
            console.log(obj);
        },
        add(dNum){
            this.chooseObj.num = dNum;
        },
        reduce(dNum){
            this.chooseObj.num = dNum;
        }
    }
}
</script>
<style lang="scss">
    .home-wrap{
        width:100%;
        height: 100%;
        display: flex;
        .left{
            width:80px;
            height: 100%;
            border-right:1px solid gray;
            margin-right:10px;
            li{
                width:100%;
                height:40px;
                border-bottom:1px solid gray;
            }
        }
        .right{
            flex:1;
            height: 100%;
        }
    }
</style>

